<template>
  <!-- 散点图组件 -->
  <div id="main" ref="barEchart" class="barEchart" />
</template>
<script>
// import * as echarts from 'echarts'

export default {
  name: 'Linechart',
  data() {
    return {
      property: 'value'
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {

    drawChart() {
      //   准备好DOM 初始化 echart 实例
      //   var myChart = this.$echarts.init(document.getElementById('main'))
      // 同一个页面使用多次会出现数据覆盖的问题 只会显示一个页面 解决方法使用ref
      const myChart = this.$echarts.init(this.$refs.barEchart)
      //   绘制图标
      myChart.setOption({
        grid: { // 控制图表的上下左右坐标
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          scale: true// 脱离0 的比例

        },
        yAxis: {
          type: 'value',
          scale: true // 脱离0 的比例
        },
        toolbox: {
          feature: {
            saveAsImage: {}, // 导出图片
            dataView: {}, // 数据视图
            restore: {}, // 还原
            dataZoom: {} // 区域缩放
            // magicType: {
            //   type: ['bar', 'line']
            // }//

          }
        },
        legend: {
        },
        series: [
          {

            // symbolSize: 20, // 控制散点图的大小
            symbolSize: function(arg) { // 控制散点图的大小支持回调函数
            //   console.log(arg)
              var height = arg[0] / 100
              var weigth = arg[1]
              //   bmi = 体重kg / (身高*身高m) 大于28 就等于肥胖  数据不对 全部返回的小于28  所以散点图的大小是20
              var bmi = height / (weigth * weigth)
              if (bmi > 28) {
                return 40
              }
              return 20
            },
            itemStyle: { // 控制散点图的颜色  也支持回调函数
            //   color: 'red'
              color: function(arg) {
                // console.log(arg)
                var height = arg.data[0] / 100
                var weigth = arg.data[1]
                var bmi = height / (weigth * weigth)
                if (bmi > 28) {
                  return 'red'
                }
                return 'green'
              }
            },
            data: [
              [170.0, 80.04],
              [88.07, 60.95],
              [113.0, 75.58],
              [90.05, 80.81],
              [110.0, 80.33],
              [104.0, 70.66],
              [103.4, 60.81],
              [100.0, 60.33],
              [104.0, 80.96],
              [102.5, 60.82],
              [90.15, 70.2],
              [101.5, 70.2],
              [130.03, 120.23],
              [102.2, 70.83],
              [20.02, 40.47],
              [100.05, 90.33],
              [140.05, 120.96],
              [160.03, 160.24],
              [102.0, 60.26],
              [102.0, 80.84],
              [70.08, 50.82],
              [150.02, 150.68]
            ],
            // type: 'scatter',// 常规散点图类型
            type: 'effectScatter', // 水波纹效果
            showEffectOn: 'render', // render当散点图渲染完成之后开始自动渲染动画   emphasis当鼠标经过的时候散点动画开始展示
            rippleEffect: { // 水波纹效果动画  涟漪动画
              scale: 5
            }

          }

        ]
      })
    }
  }
}
</script>
<style scoped>
   .span {
       display: block;
       width: 100px;
       height: 100px;
   }
</style>

